<template>
    <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count">
            <strong>{{ plusOne }}</strong> item left
        </span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
            <li>
                <a class="selected" href="#/" @click="all">All</a>
            </li>
            <li>
                <a href="#/active" @click="active">Active</a>
            </li>
            <li>
                <a href="#/completed" @click="complete">Completed</a>
            </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed" @click="clear">Clear completed</button>
    </footer>
</template>



<script lang="ts" setup>

import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
import { useMainStore } from '../store'

const todo = useMainStore()



//计算属性
const plusOne = computed(() => {
    let arr = todo.todoList.filter(item => {
        return !item.status
    })
    return arr.length
})
//清空已选
const clear = function () {
    let arr = todo.todoList.filter(item => {
        if (item.status == true) {
            axios.delete('http://localhost:8000/todo/' + item.id)
        }
        return !item.status
    })
    todo.clear(arr)
}
//active
const active = function () {
    todo.act()
}
//complete
const complete = function () {
    todo.comp()
}
//all
const all = function () {
    todo.all()
}



</script>

<style  scoped>
</style>